【後轉前要多久】# Day03 HTML - BODY內的東西 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 3

Modern Web

後轉前要多久系列第 3 篇

【後轉前要多久】# Day03 HTML - BODY內的東西

13th鐵人賽

gjlmotea

2021-09-18 23:41:22

1439 瀏覽

分享至

早期網頁大多都只有HTML骨架，
多數都是白底黑字、沒有美美的編排，文字特效blink一閃一閃的，
加上一些表格或表單，就能傳遞所有想要的資訊，就像現在的實體書本一樣，
頂多加給張照片，或者配個黃黃或黑黑的背景底色，

但現在使用者都太挑食，網頁寫的醜就沒人想看了，動不動就想按左上或右上角的叉叉

以前學的時候還不知道，
以為在HTML中，每個tag的意義是一樣的，都只是為了網頁排版用而設計不一樣的外框或者外型，
只知道<h1>就很大的字、數字越往<h6>就越小 (蠻納悶為啥數字越大反而字體越小...我一開始都記不起來)
而<p>就是整整齊齊會多佔一點空間的字，<div>就普普通通中規中矩的字。

但徹底了解後，才知道每個標籤其實都有各自的語意，盡量不要亂使用。

有語意的標籤

搜索引擎是個大架構、有規模的爬蟲系統，
會依照這個網頁寫的內容及資訊，抓出網頁寫的標題、內文、文字段落敘述、圖片等等。

舉個較極端的例子，
即使改變樣式讓<h1>的文字大小、字型、顏色都與<div>一模一樣，
呈現出來的畫面雖然一樣，使用者看到的感受度也都相同，
肉眼來看是這樣，但對搜尋引擎來說卻不是這麼回事。

搜索引擎會認為這個網頁最重要的資訊(文章標題)是<h1>，
而文字段落描述是<p>，抓到<img>知道這是張圖片，看到<a>知道這是連結等等。
搜索引擎會去分辨這些事情，將搜索到的網站標題關鍵字下去做分類。

HTML <Body>內的東西

為節省版面空間，
往後程式碼的部分都是放在Body內部的東西

<p>段落</p>
<p>段落</p>
<div>DIV</div>
<div>DIV</div>

上方即為以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題</title>
</head>
<body>
    <p>段落</p>
    <p>段落</p>
    <div>DIV</div>
    <div>DIV</div>
</body>
</html>

標題(headers) <h1>~<h6>

數字越小，字體越大。

一個網頁裡面盡量只能有一個<h1>，代表整篇帖子的主題。
如果一篇文章下了兩個大標題，那會是有點詭異的事。

<h1>網頁的大標題</h1>
<h2>網頁的副標題</h2>
<h3>網頁的中標題</h3>
<h4>網頁的小標題</h4>
<h5>網頁的小小標題</h5>
<h6>網頁的最小標題</h6>

文字段落 <p>

<p> 段落(paragraph)

預設的話會佔據段落的上下方一些空間

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et, mollitia!</p>

連結標籤 <a>

<a> 錨點掛勾(anchor)

<a href="https://ithelp.ithome.com.tw/users/20125192/ironman/4909" target="_blank">連結</a>

href 連結網址(hypertext reference)，可為相對路徑或絕對路徑(其他網站的網址連結)
target 沒填時預設為_self以目前頁面開啟連結，而_blank 為另啟新視窗方式點開連結

另外<a>可以製作追蹤id的效果，會跳轉回對應的id元素去，
這也是在網頁中class能重複、id卻不能重複的理由，
如果id重複，瀏覽器可能只會永遠跳到第一個id去。

<h1 id="title">我是標題</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>內容內容內容內容內容</p>
<a href="#title">點我回到標題</a>
<h1 id="title">我是標題</h1>

圖片標籤 <img>

<img> 圖片(image)

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Google_logo_%282013-2015%29.svg/1024px-Google_logo_%282013-2015%29.svg.png" alt="Google的Logo">

src 圖片連結網址(source)，可為相對路徑或絕對路徑(其他網站的圖片網址)
alt 圖片的文字敘述(alternate text)，圖片失效時會顯示文字，以及讓讀稿機將圖片轉成文字讀出助於盲人理解

列表清單 <ul>、<ol>、<li>

建議有主題相關聯性的東西就用表單來放來，而非多個div

<ul> 無順序(unordered list) 前面是一個點
<ol> 有順序(ordered list) 有編號
<li> 項目實體(list)，通常會被<ul>或<ol>給包住 ~~被OL包住這句話好像怪怪的~~

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

<ol>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ol>

表格 <table>、<tr>、<th>、<td>

<table> 表格
<tr> 表格列(table row)，用以新增表格欄位(直行、往下新增)
<th> 表頭列(table headers)，用以表示第一列資料的表頭(橫列、往右新增)
<td> 表單資料(table data)，用以新增資料列(橫列、往右新增)

<table>
    <tr>
        <th>標題1</th>
        <th>標題2</th>
    </tr>
    <tr>
        <td>內容1</td>
        <td>內容2</td>
    </tr>
    <tr>
        <td>內容1</td>
        <td>內容2</td>
    </tr>
</table>

Table表單沒有CSS時真的頗無聊、沒啥意思。

表單 <form> 、輸入 <input>

前面都是小case，
這邊開始是HTML的大魔王。

表單 <form>

<form action="index.html" method="get">
    <input type="text" name="mail" placeholder="請輸入信箱">
    <input type="text" name="person" placeholder="請輸入名字">
    <input type="submit" value="送出">
</form>

<form>

type 種類。常見帶入值有的:
- text 單行文字框
- button 按鈕
- submit 提交表單時的送出按鈕
- radio 在相同name的選項中只能單選框
- checkbox 打勾複選框
name 送出的參數名稱，名稱通常同id。(瀏覽器透過name名稱來記住使用者常填寫的帳號密碼，如chrome就有自動填入帳號密碼功能)
value 內容值、預設填入的值。表單提交時是按value傳遞，而不是顯示的字
placeholder 佔位符，未填寫輸入時顯示的提示

<input>

action 按下送出後，會跳轉到 action 寫的位置進行處理(通常是後端網頁)，URL後面會串上?mail=123&person=333
method 預設是get GET方法會將參數顯示在網址，純粹做查詢要資料、或者開發時用Debug相對方便。填入post POST方法則不會顯示任何參數在網址列上，相對來說安全一些。

<form action="index.html" method="get">
    <label>性別</label>
    <input type="radio" name="sex" value="male">男生
    <input type="radio" name="sex" value="female">女生

    <label>興趣</label>
    <input type="checkbox" name="hobby" value="movie">電影
    <input type="checkbox" name="hobby" value="music">音樂
    <input type="checkbox" name="hobby" value="comic">漫畫

    <input type="submit" value="送出">
</form>

當name相同、使用checkbox多選時，送出後URL會串上?sex=male&hobby=movie&hobby=music
一樣的Key重複地帶上多個值

標籤 <label>

<label> 標籤，通常搭配表單一起使用作為表單的提示字、說明標籤

<form action="index.html" method="get">
    <label for="mail">電子郵件</label>
    <input type="text" name="mail" id="mail" placeholder="請輸入信箱">
</form>

for 用途為點擊標籤後，會找相對應的id 來定位、聚焦

下拉選單 <select> 、選項 <option>

select 清單、選單
option 選項實體

<form action="index.html">
    <select name="year">
    <option value="1997">1997</option>
    <option value="1998">1998</option>
    <option value="1999">1999</option>
    </select>

    <input type="submit" value="送出">
</form>

送出後，URL會串上?year=1997

多行文字 <textarea>

<form action="index.html" method="get">
    <textarea name="content" cols="30" rows="10"></textarea>
    <input type="submit" value="送出">
</form>

cols 顯示寬的字元數
rows 顯示高的字元數
(也可使用CSS來控制欄位寬高)

無語意的標籤

OK，前面講了蠟麼多東西，現在剩下一點點了

區塊標籤 <div> 、行內標籤 <span>

<div> 本身不具任何意思、沒有語意，單純拿來排版用。
division意思是"分隔、分裂、除法"
區塊元素 會優先佔滿一整塊水平方向的區域，會換行。

<sapn> 本身不具任何意思，和div一樣純粹點綴樣式用。
spans意思是"跨越、跨度"
行內元素 會優先擠在同一塊水平方向的區域，能不換行就不換行。

<div>Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
<span>Lorem ipsum dolor sit amet, consectetur.</span>

因為不具有任何語意，這兩者常被拿來當作容器(Container)，適合拿來掛CSS。

不成雙成對出現的標籤

不成雙成對的標籤，為了看起來對稱些，
有些人會選擇性的加上結尾封閉標籤< />，但在HTML中有沒有寫是一樣的。

<br>

<br> 換行、斷行(break)
<br /> 也有人這樣寫

<hr>

<hr> 水平線(horizontal rule)
<hr /> 也有人這樣寫

Lorem ipsum dolor sit amet. <br>
Lorem ipsum dolor sit amet. <br>
<hr>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, voluptatibus! <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, voluptatibus! <br>

單純講解HTML真的很無聊，
但熟悉過後再回來找純HTML用法也比較快，
擇日搭配上CSS才會有效果上的變化，會更有學習的動力。

【後轉前要多久】# Day02 HTML - 基本觀念複習

【後轉前要多久】# Day04 HTML - 元素屬性、以及Emmet語法

系列文

後轉前要多久共 30 篇

RSS系列文訂閱系列文

16 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22203 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

後轉前要多久系列 第 3 篇